/* ===============================
   BASIC RESET
   =============================== */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ===============================
   NAVIGATION
   =============================== */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(50, 50, 60, 0.95);
  z-index: 1000;
  padding: 10px 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 20px;
}

nav li {
  text-align: center;
}

nav a {
  font-family: 'Libre Baskerville', serif;
  color: #e6e6e6;
  text-decoration: none;
  padding: 5px 10px;
  transition: 0.3s;
}

nav a:hover {
  color: #1b1b20;
  border-bottom: 2px solid #e6e6e6;
}

/* ===============================
   HAMBURGER (mobile)
   =============================== */
#nav-toggle {
  display: none; /* always hide checkbox visually */
}

.nav-toggle-label {
  display: none;
  position: absolute;
  top: 15px;
  right: 20px;
  width: 30px;
  height: 24px;
  cursor: pointer;
  z-index: 1100;
}

.nav-toggle-label span,
.nav-toggle-label span::before,
.nav-toggle-label span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background: #e6e6e6;
  border-radius: 2px;
  transition: all 0.3s ease;
}

.nav-toggle-label span {
  top: 50%;
  transform: translateY(-50%);
}

.nav-toggle-label span::before {
  content: "";
  top: -8px;
}

.nav-toggle-label span::after {
  content: "";
  top: 8px;
}

/* ===============================
   MOBILE / TABLET (≤768px)
   =============================== */
@media (max-width: 768px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 20px;
  }

  .nav-toggle-label {
    display: block;
  }

  nav ul {
    flex-direction: column;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }

  nav li {
    width: 100%;
    text-align: center;
    margin: 10px 0;
  }

  #nav-toggle:checked ~ .nav-menu {
    max-height: 400px; /* adjust for number of links */
  }

  #nav-toggle:checked + .nav-toggle-label span {
    background: transparent;
  }

  #nav-toggle:checked + .nav-toggle-label span::before {
    transform: rotate(45deg);
    top: 0;
  }

  #nav-toggle:checked + .nav-toggle-label span::after {
    transform: rotate(-45deg);
    top: 0;
  }
}

/* ===============================
   HEADER
   =============================== */
header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 120px 20px 40px; /* top padding = nav height + space */
  background-color: #070a29;
  color: #e6e6e6;
}

header .logo-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

header h1 {
  font-size: 2rem;
  color: #6cd5fc;
  margin-top: 10px;
}

header h2 {
  font-size: 1.2rem;
  color: #e6e6e6;
  margin-top: 5px;
}

/* ===============================
   MEDIA: Tablet
   =============================== */
@media (max-width: 768px) {
  header {
    padding-top: 150px; /* more room for hamburger menu */
  }
}


/* Main body*/ 
html,body { 
	height: 100%; 
	margin: 0;
	 } 
	 
main{ 
	flex: 1; 
	padding: 80px 20px;
	 } 
	 
p { 
	border-radius: 50px;
	 } 
	 
body { 
	font-size: clamp(16px, 2vw, 20px); 
	color: #e6e6e6; font-family: 'Libre Baskerville', serif; 
	font-weight: 400; 
	font-style: normal; 
	background-color: #070a29; 
	margin: 0; 
	padding: 0; 
	padding-top: 20px; 
	display: flex; 
	flex-direction: column; 
	min-height: 100vh; 
	flex-direction: column; 
	min-height: 100vh; 
	} 
	
h1 { 
	font-size:28px; 
	color:#6cd5fc; 
	font-family: 'Libre Baskerville', serif; 
	font-weight: 400; 
	font-style: normal; 
	border-radius: 50px;
	} 
	
h2 { 
	font-size: clamp(18px, 2.5vw, 22px);
	color:#6729f0; font-family: 'Libre Baskerville', serif; 
	font-weight: 400; 
	font-style: normal; 
	padding:40px 10px; 
	} 
@media (max-width: 768px) {
  header {
    text-align: center;       /* center header content */
    padding-top: 120px;       /* room for fixed nav */
    display: flex;
    flex-direction: column;   /* stack logo + h2 vertically */
    align-items: center;      /* horizontally center */
  }

  .logo-image {
    margin: 0 auto;           /* center logo image */
  }

  .logo-image img {
    max-height: 70px;         /* optional, scale down logo */
    width: auto;
    display: block;
  }

  header h2, header h1 {
    margin: 10px 0 0 0;       /* small top margin, no left alignment */
    text-align: center;       /* force center */
  }
}

	
/* Bio Styling*/ 
.about-section { 
	display: flex; 
	justify-content: center; 
	background-color: #070a29; 
	padding: 20px; 
	} 
	
.two-column-container { 
	display: flex; 
	gap: 40px; 
	width: 100%; 
	max-width: 1200px; 
	align-items: stretch; 
	} 
	
.text-column { 
	flex: 2; 
	color: white; 
	padding-right: 60px; 
	display: flex; 
	flex-direction: column;
	justify-content: center; /* or space-between */ 
	} 
	
.image-column { 
	flex: 1; 
	background-image: url("code.jpg"); 
	background-size: cover; 
	background-position: center; 
	} 
	
.proud { 
	display: inline-block; 
	padding: 12px; 
	background-color: #e6e6e6; 
	color: #070a29; 
	text-decoration: none; 
	border-radius: 6px; 
	font-weight: bold; 
	font-size:inherit; 
	} 
	
.proud:hover { 
	background-color: #6cd5fc;
	 } 
	 
@media (max-width: 768px) { 
	.two-column-container { flex-direction: column; 
	min-height: auto; 
	} 
	.text-column { padding-right: clamp(20px, 5vw, 60px); 
	} 
	.image-column { height: 40vh; /* responsive image height */ 
	min-height: 220px; 
	} 
	} 

/* Responsive: stack columns on narrow screens */ 
	@media (max-width: 768px) { 
	.two-column-container { 
	flex-direction: column; 
	} 
	.text-column, .image-column { 
	padding-right: 0; 
	min-width: 100%; 
	height: auto; /* let image height adjust naturally */ 
	} 
	
	.image-column { 
	min-height: 200px; /* optional: keep a decent visual height */ 
	} 
	} 
	
@media (max-width: 768px) {
  nav {
    position: relative;
  }

  header {
    padding-top: 20px;
  }
}

	
/* Gallery section styles*/ 
#main-gallery-container { 
	margin-top:50px;
 	} 
 	
 #gallery { 
 	display: grid; 
 	grid-template-columns: repeat(3, 1fr); /* 3 columns on desktop */ 
 	gap: 20px; /* spacing between images */ 
 	width: 90%; /* container doesn’t stretch full viewport */ 
 	max-width: 1200px; /* keeps it readable on large screens */ 
 	margin: 20px auto; /* center container */ 
 	} 
 	
figure{ 
	margin: 10px; 
	padding: 0px; 
	} 
	
#gallery img { 
	width: 100%; /* fills the grid cell */ 
	height: auto; /* keeps aspect ratio */ 
	border: 3px solid #6729f0; 
	display: block; /* removes inline spacing */ 
	box-sizing: border-box; 
	} 
	
figcaption{ 
	background-color: #6729f0; 
	width: 100%; 
	text-align: center; 
	color: #e6e6e6; 
	padding: 9px 0px 11px 0px; 
	font-size: 15px; position: static; 
	} 
	
@media screen and (max-width: 600px) { 
	figcaption { font-size: 3vw; 
	} 
	#gallery { grid-template-columns: 1fr; /* stack images */ 
	width: 95%; /* smaller width for padding on mobile */ 
	} 
	} 
	
	
/* FAQ section styles */ 
.faq-section { 
	background-image: url("faq.jpg"); 
	background-size: cover; 
	background-position: center;
	 } 
	 
.faq-inner { 
	position: relative; 
	} 
	
.faq-section { 
	position: relative;
	padding: 4rem 2rem; 
	background-image: url("faq.jpg"); 
	background-size: cover; 
	background-position: center; 
	background-repeat: no-repeat; 
	} 
	
.faq-section::before { 
	content: ""; 
	position: absolute; 
	inset: 0; 
	background: linear-gradient( rgba(7,10,41,0.4), rgba(7,10,41,0.6) );
	z-index: 0; 
	} 
	
.faq-section > * {
	position: relative; 
	z-index: 1; 
	} 
	
.faq summary { 
	display: block; /* ← THIS is the missing line */ 
	cursor: pointer; 
	} 
	
.faq summary::-webkit-details-marker { 
	display: none; 
	} 
	
.faq summary::marker { 
	display: none; 
	color: #e6e6e6; 
	} 
	
.faq-title { 
	display: inline-flex; 
	align-items: center; 
	gap: 10px; 
	} 
	
.faq h2 { 
	margin: 0; 
	color: white;
	 } 
	 
/* Arrow icon */ 
.arrow { 
	width: 10px; 
	height: 10px; 
	border-right: 2px solid #e6e6e6; 
	border-bottom: 2px solid #e6e6e6; 
	transform: rotate(45deg); 
	transition: transform 0.3s ease; 
	} 
	
/* Rotate arrow when open */ 
.faq[open] 
.arrow { 
	transform: rotate(-135deg); 
	} 
	
.faq p, 
.about-section p { 
border-radius: 12px; 
} 

.faq-section, 
.faq-section p, 
.faq-section summary { 
	color: #e6e6e6; 
	} 
	
	
/* What We Can Offer Page*/ 
.page { 
	display: grid; 
	grid-template-columns: repeat(3, 1fr); 
	gap: 20px; padding: 20px; 
	align-items: stretch; /* stretch all boxes to same height */ 
	} 

@media (max-width: 768px) { 
	.page { 	
	grid-template-columns: 1fr; 
	} 
	} 

.box { 
	display: flex; 
	flex-direction: column; 
	justify-content: flex-start; /* changed from center */ 
	align-items: center; 
	background: #fff; 
	border: 1px solid #ccc; 
	border-radius: 8px; 
	padding: 15px; 
	color: #070a29 
	} 
	
.box .contact { 
	margin: 0; 
	max-width: 100%; 
	padding: 15px; 
	} 
	
.box.contact-box { 
	padding-top: 10px; 
	padding-bottom: 10px; 
	padding-left: 15px; 
	padding-right: 15px; 
	} 
	
.box canvas { 
	display: block; 
	width: 100%; /* fill available width of box */ 
	max-width: 400px; /* optional max so it doesn’t stretch too far */ 
	height: auto; 
	} 
	
.box p { 
	margin: 0 0 10px 0; /* only bottom margin, remove top margin */ 
	text-align: center; /* optional, if you want centered text */ 
	} 
	
/*Contact Form Styles */ 
.contact { 
	background-color: #070a29; 
	padding: 20px; 
	margin: 80px auto; 
	max-width: 1100px; 
	margin: 120px auto; 
	box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
	border-radius: 8px; 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	grid-template-areas: 
	"topic firstname" 
	"message surname" 
	"message email" 
	"button button"; 
	gap: 20px; 
	font-family: 'Libre Baskerville', serif; 
	font-size: 18px; 
	color: #e6e6e6; 
	line-height: 1.6; 
	margin: 120px auto; 
	} 
	
.contact h2{ 
	font-family: 'Libre Baskerville', serif; 
	font-size: 24px; color: #e6e6e6; 
	margin-bottom: 20px; 
	display: inline-block; 
	padding-bottom: 5px; 
	letter-spacing: 0.2em; 
	} 
	
.contact label { 
	font-size: 14px; 
	text-transform: uppercase; 
	letter-spacing: 0.05em; 
	color: #e6e6e6; /* lighter so it’s visible on dark background */ 
	} 
	
.contact input { 
	font-family: 'Libre Baskerville', serif; 
	font-size: 18px; 
	color: #848484; 
	line-height: 1.6; 
	margin: 0; 
	} 
	
label { 
	font-size: 14px; 
	text-transform: uppercase; 
	letter-spacing: 0.05em; 
	color: #333; 
	} 
	
.contact input, 
.contact select, 
.contact textarea { 
	width: 100%; 
	padding: 12px; 
	border: 2px solid #e6e6e6; 
	background: transparent; 
	color: #e6e6e6; 
	font-family: 'Libre Baskerville', serif; 
	font-size: 16px; 
	} 
	
.contact textarea { 
	min-height: 120px; 
	resize: vertical; 
	} 
	
.contact-section h2 { 
	text-align: left; 
	margin-bottom: 30px; 
	color: #e6e6e6; 
	} 
	
.topic { 	
	grid-area: topic; 
	} 

.firstname { 
	grid-area: firstname; 
	} 
	
.message { 
	grid-area: message; 
	} 

.surname { 
	grid-area: surname; 
	} 
	
.email { 
	grid-area: email; 
	} 

.contact button { 
	grid-area: button; 
	margin: 30px auto; 
	padding: 10px 20px; 
	background-color: #070a29; 
	color: #e6e6e6; 
	border: none; 
	border-radius: 3px; 
	cursor: pointer; 
	} 
	
/* Payment Form Styles - matches your contact form */ 
.payment-form { 
	background-color: #070a29; 
	padding: 15px; 
	display: grid; 
	grid-template-columns: 1fr 1fr; 
	grid-template-areas: 
	"cardholder cardnumber" 
	"expiry cvv" 
	"amount amount" 	
	"button button"; 
	gap: 20px; 
	font-family: 'Libre Baskerville', serif; 
	font-size: 16px; 
	color: #e6e6e6; 
	line-height: 1.5; 
	} 
	
.payment-form label { 
	font-size: 14px; 
	text-transform: uppercase;
	letter-spacing: 0.05em; 
	color: #e6e6e6; 
	display: block; 
	margin-bottom: 5px; 
	} 
	
.payment-form input { 
	width: 100%; 
	padding: 10px; 
	border: 2px solid #e6e6e6; 
	border-radius: 4px; 
	background: transparent; 
	color: #e6e6e6; 
	font-family: 'Libre Baskerville', serif; 
	font-size: 16px; 
	} 
	
.payment-form button { 
	grid-area: button; 
	padding: 10px 20px; 
	margin: 0 auto; 
	background-color: #070a29; 
	color: #e6e6e6; 
	border: 2px solid #e6e6e6; 
	border-radius: 4px; 
	cursor: pointer; 
	font-size: 16px; 
	transition: background 0.3s, color 0.3s; 
	} 
	
.payment-form button:hover { 
	background-color: #e6e6e6; 
	color: #070a29; 
	} 
	
/* Grid areas for inputs */ 
.cardholder { 
	grid-area: cardholder; 
	} 
.cardnumber { 
	grid-area: cardnumber; 
	} 

.expiry { 
	grid-area: expiry; 
	} 

.cvv { 
	grid-area: cvv; 
	} 

.amount { 
	grid-area: amount; 
	} 

.button { 
	grid-area: button; 
	} 
	
/* Testimonials page*/ 
.testimonials { 
	display: flex; 
	flex-direction: column; 
	align-items: center; 
	} 
	
.slider { 
	width: 90%; 
	max-width: 1000px; 
	background: white; 
	border-radius: 12px; 
	overflow: hidden; 
	} 

.slide { 
	display: none; 
	align-items: flex-start; 
	justify-content: flex-start; 
	} 

.slide.active { 
	display: flex; 
	} 
	
.slide img { 
	width: 45%; 
	height: auto; 
	object-fit: contain; 
	padding: 20px;
	align-self: center;
	} 
	
.content { 
	padding: 20px; 
	align-self: flex-start; 
	font-family: 'Libre Baskerville', 
	serif; 
	color: #070a29; 
	} 

.content h2, 
.content h3 { 
	margin-top: 0; 
	} 

/* Click zones */ 
.click { 
	position: absolute; 
	top: 0; 	
	width: 50%; 
	height: 100%; 
	cursor: pointer; 
	} 
.click.left { 
	left: 0; 
	} 

.click.right { 
	right: 0; 
	} 
	
	
/* Footer section styles */ 
footer { 
	background-color:#070a29; 
	padding: 10px 0; 
	color:#e6e6e6; 
	text-align:center; 
	} 

.footer-content { 
	text-align: center; 
	max-width: 1200px; 
	margin: 0 auto; 
	} 
	
.footer-links{ 
	list-style-type:none; 
	padding:20px; 
	display: flex; 
	justify-content:center; 
	gap: 20px; 
	} 

.footer-links a { 
	color: #e6e6e6; 
	text-decoration: none; 
	transform: color 0.3s; 
	} 
	
.footer-links a:hover{ 
	color: #2b6289; 
	text-decoration: none; 
	transform: color 0.3s; 
	} 

.footer-social { 
	margin-top: 0; 
	} 

.footer-social a { 
	color: #e6e6e6; 
	font-size: 24px; 
	margin:0 10px; 
	text-decoration: none; 
	transition: color 0.3s; 
	} 
	
.footer-social a:hover { 
	color: #2b6289; 
	} 
	
.Email{ 
	text-decoration: none; 
	} 
	
.Email a { 
	color: #e6e6e6; 
	text-decoration: none;
	transform: color 0.3s; 
	} 

.Email a:hover{ 
	color: #2b6289; 
	text-decoration: none; 
	transform: color 0.3s; 
	}